//有状态组件
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            'Row组件',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.purple,
        ),
        body:
            //listview默认构造函数
            //   ListView(
            // scrollDirection: Axis.horizontal,
            // children: [
            //   Container(
            //     height: 130,
            //     color: Colors.orange,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件1'),
            //   ),
            //   Container(
            //     height: 80,
            //     color: Colors.blue,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件2'),
            //   ),
            //   Container(
            //     height: 90,
            //     color: Colors.pink,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件3'),
            //   ),
            //   Container(
            //     height: 70,
            //     color: Colors.orange,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件4'),
            //   ),
            //   Container(
            //     height: 50,
            //     color: const Color.fromARGB(255, 132, 127, 119),
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件5'),
            //   ),
            //   Container(
            //     height: 60,
            //     color: Colors.teal,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件6'),
            //   ),
            //   Container(
            //     height: 77,
            //     color: Colors.black,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件7'),
            //   ),
            //   Container(
            //     height: 88,
            //     color: Colors.blueGrey,
            //     alignment: Alignment.centerLeft,
            //     child: const Text('鸿蒙大事件8'),
            //   )
            // ],
            // )
            // );
            //2.Listview  builder构造
            //     ListView.builder(
            //   itemBuilder: (context, index) {
            //     return Container(
            //       padding: const EdgeInsets.all(10),
            //       child: Row(
            //         children: [
            //           Image.asset('assets/foreground.png', width: 90),
            //           const Expanded(
            //               child: Text(
            //             '孩儿解放东路看手机番窠倒臼书法课溜达鸡司法会计孩儿解放东路看手机番窠倒臼书法课溜达鸡司法会计',
            //             maxLines: 2,
            //             overflow: TextOverflow.ellipsis,
            //           )),
            //           const Padding(
            //             padding: EdgeInsets.only(left: 10),
            //             child: Icon(Icons.access_time_filled),
            //           )
            //         ],
            //       ),
            //     );
            //   },
            //   itemCount: 20,
            // ));
            //3.separated
            ListView.separated(
                itemBuilder: (context, index) {
                  return Container(
                    padding: const EdgeInsets.all(10),
                    child: Row(
                      children: [
                        Image.asset('assets/foreground.png', width: 90),
                        const Expanded(
                            child: Text(
                          '孩儿解放东路看手机番窠倒臼书法课溜达鸡司法会计孩儿解放东路看手机番窠倒臼书法课溜达鸡司法会计',
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                        )),
                        const Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Icon(Icons.access_time_filled),
                        )
                      ],
                    ),
                  );
                },
                separatorBuilder: (context, index) {
                  return Container(
                    height: 1,
                    color: Colors.grey[200],
                    margin: const EdgeInsets.symmetric(horizontal: 50),
                  );
                },
                itemCount: 10));
  }
}
